<template>
  <view class="uni-service-item bcl-white p-10" @tap="toDetailPage">
    <!-- 店铺信息 -->
    <view class="info box border border-bottom pb-10">
      <view class="image mr-10">
        <image class="bcl-default" :src="item.cover || defaultImage" />
      </view>

      <view class="box box-column box-between">
        <!-- 名称 -->
        <view class="name fz-15 bold">
          <text class="mr-5">{{ item.title }}</text>
          <text class="uni-tag">{{ item.type == 1 ? "作品" : "服务" }}</text>
        </view>

        <!-- 金额 -->
        <view class="money cl-main">￥{{ item.cash }}</view>

        <!-- 评分 -->
        <view class="rate box fz-12 cl-second">
          <view class="mr-20">
            <text class="cl-main mr-5">{{ item.good_comment || 0 }}</text>
            <text>条好评</text>
          </view>

          <view>
            <text class="cl-main mr-5">{{ item.sales_num || 0 }}</text>
            <text>人购买</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 其他信息 -->
    <view class="extra box box-between box-column-center mt-10">
      <!-- 地区 -->
      <view class="cl-second">
        <text class="icon icon-location fz-14"></text>
        <text>{{ item.addr }}</text>
      </view>

      <!-- 店铺信息 -->
      <view class="box box-column-center">
        <view class="uni-avatar uni-avatar-sm mr-5">
          <image :src="item.shop_pic || defaultImage" />
        </view>
        <view>{{ item.shop_name }}</view>
      </view>

      <view>
        <button class="uni-button" @tap.stop="toChatPage(item.uid)">
          联系TA
        </button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "uniServiceItem",

  props: {
    item: {
      type: Object,
      default: {},
    },
  },

  data() {
    return {
      defaultImage: this.$config.default,
    };
  },

  methods: {
    toDetailPage() {
      return uni.navigateTo({
        url: `/service/detail?id=${this.item.id}&type=${this.item.type}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.uni-service-item {
  .info {
    .image {
      image {
        width: 180upx;
        height: 180upx;
      }
    }
  }
}
</style>
